<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>购买电影票</title>
  <link th:href="@{/images/logo.svg}" rel="icon" type="image/svg+xml">
  <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
  <link th:href="@{/css/bootstrap-icons.min.css}" rel="stylesheet">
  <style>
    .canva * {
      user-select: none;
    }

    .seat:hover {
      transform: scale(1.1);
      cursor: pointer;

    }

    .accessible {
      background-color: rgb(204, 204, 204)
    }

    .selected {
      background-color: #93ccff;
    }

  </style>
</head>
<body>
<header>
  <ul class="nav nav-tabs m-2">
    <li class="nav-item">
      <a class="nav-link disabled" th:href="@{/me}">
        <i class="bi bi-person-circle"></i>
        <span class="ms-1" th:text="${user.getUsername()}"></span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" th:href="@{/showing}">
        <i class="bi bi-camera-reels"></i>
        <span class="ms-1">放映日程</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link active">
        <i class="bi bi-ticket"></i>
        <span class="ms-1">选座购票</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link">
        <i class="bi bi-film"></i>
        <span class="ms-1">热映电影</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" th:href="@{/my-tickets}">
        <i class="bi bi-wallet2"></i>
        <span class="ms-1">我的影票</span>
      </a>
    </li>
    <li class="nav-item ms-auto">
      <a class="nav-link" th:href="@{/me}">
        <i class="bi bi-person-gear"></i>
        <span class="ms-1">账号管理</span>
      </a>
    </li>
  </ul>
</header>
<main class="clearfix">
  <div class="d-flex flex-column justify-content-center w-100 pt-4 canva">
    <p class="h6 text-center" style="color: #6c757d">荧幕</p>
    <div class="container w-50 rounded-2 mb-5" style="height: 5px; background-color: #6c757d"></div>
    <div class="mt-3 d-flex flex-column justify-content-center align-items-center gap-3">
      <div class="d-flex justify-content-center gap-3"
           th:each="row : ${#numbers.sequence(0, rows - 1)}">
        <div th:each="col : ${#numbers.sequence(0, cols - 1)}">
          <div
              class="rounded-4 seat accessible"
              th:unless="${seats[row][col]}"
              th:data-seat-row="${row + 1}"
              th:data-seat-col="${col + 1}"
              style="width: 50px; height: 50px"
          >
          </div>
          <div
              class="rounded-4 bg-danger-subtle seat booked"
              th:if="${seats[row][col]}"
              th:data-seat-row="${row + 1}"
              th:data-seat-col="${col + 1}"
              style="width: 50px; height: 50px"
          >
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="mt-3 d-flex gap-3 justify-content-center pt-2">
    <a class="btn btn-secondary" style="width: 100px" th:href="@{/showing}">取消</a>
    <button class="btn btn-primary" style="width: 100px" id="submitBtn">确认</button>
  </div>
</main>
<input type="hidden" th:value="${screening.getId()}" id="screeningIdInput">
<script th:src="@{/js/axios.min.js}"></script>
<script th:src="@{/js/bootstrap.bundle.min.js}"></script>
<script>
let selectedSeats = [];
const screeningId = document.getElementById("screeningIdInput").value;

document.querySelectorAll(".seat").forEach(seat => {
  seat.addEventListener("click", () => {
    const row = parseInt(seat.dataset.seatRow);
    const col = parseInt(seat.dataset.seatCol);
    if (seat.classList.contains("booked")) {
      return;
    }
    selectedSeats.push({seatRow: row, seatCol: col});
    if (seat.classList.contains('selected')) {
      seat.classList.remove('selected');
      seat.classList.add('accessible')
    } else {
      seat.classList.add('selected');
      seat.classList.remove('accessible');
    }
    console.log(selectedSeats);
  })
});

document.getElementById("submitBtn").addEventListener("click", async (e) => {
  e.preventDefault();
  let ok = true;
  for (const data of selectedSeats) {
    data.screeningId = screeningId;
    try {
      const response = await axios.post('/api/tickets', data, {
        headers: {'Content-Type': 'application/json'}
      });
      if (response.status === 200) {}
    } catch (error) {
      ok = false;
      if (!error.response) {
        console.log(error);
      } else if (error.response.status === 400) {
        alert(error.response.data);
      } else if (error.response.status === 409) {
        alert(error.response.data);
      }
    }
  }
  if (ok) {
    alert("购票成功");
    location.href = "/showing";
  }
})

</script>
</body>
</html>